<template>
  <view style="min-height: 100vh;background-color: rgba(248,248,248,1);padding: 20upx;">
    <view class="content">
      <view class="order-item" :style="index != teacher_detail.length-1?'margin-bottom: 30upx;':''"
            v-for="(item, index) in teacher_detail" :key="index" @click="handleToStudy(item.course && item.course.id)">
        <view class="flex align-center justify-between"
              style="border-bottom: 1px solid rgba(0,0,0,0.05);padding: 20upx;">
          <view class="flex align-center">
            <image style="width: 80upx;height: 80upx;border-radius: 50%;" :src="item.course && item.course.admin && item.course.admin.avatar" mode="aspectFill"></image>
            <view class="number">{{ item.course && item.course.admin && item.course.admin.nick_name }}</view>
          </view>
          <view class="follow flex align-center justify-center" @click.stop="handleFollow(item.course && item.course.admin && item.course.admin.id, item)"
                :style="item.is_attention? 'background-color: rgba(255,146,136,1)' : 'background-color: rgba(229,39,24,1)'">
            {{ item.is_attention ? '已关注' : '关注' }}
          </view>
        </view>
        <view class="flex apprenticeship-details">
          <view style="margin-top: 20upx;">
            <image style="width: 286upx;height: 198upx;" :src="item.course && item.course.img_arr" mode=""></image>
          </view>
          <view style="flex: 1;margin: 36upx 0 0 18upx;">
            <view class="title">{{ item.course && item.course.name }}</view>
            <view class="flex align-center">
              <image v-if="item.course && item.course.type == 'chapter'" style="width: 25upx;height: 23upx;" src="/static/icon/tutorials/gongkaobaike@2x.png"
                     mode=""></image>
              <text class="type text-hidden" v-if="item.course && item.course.type == 'chapter'">学习到{{ item.course && item.course.learn_video_num }}</text>
              <text class="type text-hidden" v-else style="width: 65%;">{{ item.course && item.course.learn_video_num }}</text>
            </view>
            <view class="flex align-center justify-between" style="margin-top: 32upx;">
              <view style="font-size: 30upx;color: rgba(229,39,24,1); font-weight: bold;">￥{{ item.course && item.course.sale_price }}</view>
<!--              <view>-->
<!--                <text style="font-size: 24upx;color: rgba(153,153,153,1);margin-right: 8upx;">去学习</text>-->
<!--                <image style="width: 12upx;height: 20upx;" src="/static/icon/icon_more@2x.png" mode=""></image>-->
<!--              </view>-->
            </view>
          </view>
        </view>
        <view class="flex justify-end learn-evaluation-box">
          <view class="flex justify-center align-center learn-box">去学习</view>
          <view v-if="item.is_evaluate" class="flex justify-center align-center evaluation-box" @click.stop="handleToEvaluation(item)">去追评</view>
          <view v-if="!item.is_evaluate" class="flex justify-center align-center evaluation-box" @click.stop="handleToEvaluation(item)">去评价</view>
        </view>
      </view>
    </view>
    <view v-if="!teacher_detail.length" class="justify-center align-center"
          style="width: 100%; padding: 50% 0; flex-direction: column; text-align: center;">
      <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
      <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
    </view>
    <view>
      <view class="flex align-center justify-center"
            v-if="teacher_detail.length >= 15"
            style="width: 100%; height: 102upx; padding: 0 50upx;">
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
        <view style="width: 40%; text-align: center;">
          <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
          <view v-else class="action">
            <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
          </view>
        </view>
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      </view>
    </view>
  </view>
</template>

<script>
import {buyRecord_getListByCon} from "api/my/my"
import {attention_giveAttention} from "api/attention/attention";

export default {
  data() {
    return {
      teacher_detail: [], //拜师列表
      is_load: false, //加载
      bottom_flag: true, //触底标识
      page: 1, //分页
    }
  },
  methods: {
    //初始化
    pageInit(page = 1, type) {
      this.page = page;
      buyRecord_getListByCon({page, f_table: 'course'}).then(res => {
        if(type){
          this.teacher_detail = [];
        }
        let temp_data = res.data.data;
        if (!temp_data.length) {
          this.bottom_flag = false;
        }else {
          temp_data.forEach(item=>{
            this.teacher_detail.push(item);
          })
        }
      })
    },
    //关注
    handleFollow(f_id, item) {
      attention_giveAttention({f_table: 'account_user', f_id}).then(res => {
        console.log(res)
        item.is_attention = item.is_attention ? item.is_attention = 0 : item.is_attention = 1
      })
    },
    //跳转详情页
    handleToStudy(course_id) {
      this.$uniNavigateTo({
        url: '/pages/tutorials/articleDetail/articleDetail',
        query: {
          course_id
        }
      })
    },
    //去评价
    handleToEvaluation(item){
      if(item.is_delete){
        uni.showToast({
          title: '教程已删除，无法评价',
          icon: 'none'
        })
        return;
      }
      if(item.is_evaluate){
        this.$uniNavigateTo({
          url: '/pages/my/myOrder/orderReview/orderReview',
          query: {
            orders_id: item.orders_id
          }
        })
      }else {
        this.$uniNavigateTo({
          url: '/pages/my/myOrder/orderAssess/orderAssess',
          query: {
            orders_id: item.orders_id
          }
        })
      }
    },
  },
  onShow() {
    this.pageInit(1,1);
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      this.pageInit(this.page);
    }
    console.log('上拉加载')
  },
  //下拉刷新
  onPullDownRefresh() {
    this.bottom_flag = true;
    this.page = 1;
    this.pageInit(1,1);
    uni.stopPullDownRefresh();
  }
}
</script>

<style scoped lang="scss">
.apprenticeship-details{
  border-bottom: 1px solid #F8F8F8;
}
.learn-evaluation-box{
  width: 100%;
  padding: 2% 3% 0 3%;
}
.learn-box{
  width: 160upx;
  height: 60upx;
  border: 1px solid #E52718;
  color: #E52718;
  font-size: 24upx;
  border-radius: 40upx;
}
.evaluation-box{
  width: 160upx;
  height: 60upx;
  color: white;
  background-color: #E52718;
  font-size: 24upx;
  border-radius: 40upx;
  margin-left: 4%;
}
.content {
  background-color: rgba(248, 248, 248, 1);
}

.order-item {
  background-color: #FFFFFF;
  border-radius: 10upx;
  padding: 0upx 18upx 20upx 22upx;
}

.number {
  font-size: 28upx;
  font-weight: 700;
  color: rgba(51, 51, 51, 1);
  margin-left: 10upx;
}

.title {
  font-size: 30upx;
  font-weight: 700;
  margin-bottom: 24upx;
}

.type {
  margin-left: 6upx;
  border-radius: 4upx;
  font-size: 22upx;
  color: rgba(153, 153, 153, 1);
}

.follow {
  width: 140upx;
  height: 64upx;
  font-size: 28upx;
  color: #FFFFFF;
  border-radius: 40upx;
}
</style>
